<template>
	<view class="container">
		<view class="header">
			<text class="title">输入框测试页面</text>
			<text class="subtitle">测试所有类型的输入框是否正常工作</text>
		</view>

		<view class="test-section">
			<text class="section-title">基础输入框测试</text>
			
			<view class="input-group">
				<text class="label">文本输入：</text>
				<input 
					class="test-input" 
					type="text" 
					v-model="textValue" 
					placeholder="请输入文本内容"
					@input="onTextInput"
					@focus="onFocus"
					@blur="onBlur"
				/>
				<text class="value-display">当前值: {{ textValue || '空' }}</text>
			</view>
			
			<view class="input-group">
				<text class="label">数字输入：</text>
				<input 
					class="test-input" 
					type="number" 
					v-model="numberValue" 
					placeholder="请输入数字"
					@input="onNumberInput"
				/>
				<text class="value-display">当前值: {{ numberValue || '空' }}</text>
			</view>
			
			<view class="input-group">
				<text class="label">小数输入：</text>
				<input 
					class="test-input" 
					type="digit" 
					v-model="decimalValue" 
					placeholder="请输入小数"
					@input="onDecimalInput"
				/>
				<text class="value-display">当前值: {{ decimalValue || '空' }}</text>
			</view>
			
			<view class="input-group">
				<text class="label">密码输入：</text>
				<input 
					class="test-input" 
					:type="showPassword ? 'text' : 'password'" 
					v-model="passwordValue" 
					placeholder="请输入密码"
					@input="onPasswordInput"
				/>
				<text class="password-toggle" @click="togglePassword">
					{{ showPassword ? '👁️' : '🙈' }}
				</text>
				<text class="value-display">当前值: {{ passwordValue ? '***' + passwordValue.slice(-2) : '空' }}</text>
			</view>
		</view>

		<view class="test-section">
			<text class="section-title">多行文本测试</text>
			
			<view class="input-group">
				<text class="label">多行文本：</text>
				<textarea 
					class="test-textarea" 
					v-model="textareaValue" 
					placeholder="请输入多行文本内容"
					@input="onTextareaInput"
					@focus="onTextareaFocus"
					@blur="onTextareaBlur"
				/>
				<text class="value-display">当前值: {{ textareaValue || '空' }}</text>
			</view>
		</view>

		<view class="test-section">
			<text class="section-title">选择器测试</text>
			
			<view class="input-group">
				<text class="label">下拉选择：</text>
				<picker 
					class="test-picker" 
					:value="pickerIndex" 
					:range="pickerOptions" 
					@change="onPickerChange"
				>
					<view class="picker-text">{{ pickerOptions[pickerIndex] }}</view>
				</picker>
				<text class="value-display">当前值: {{ pickerOptions[pickerIndex] }}</text>
			</view>
		</view>

		<view class="test-section">
			<text class="section-title">调试信息</text>
			
			<view class="debug-item">
				<text class="debug-label">文本输入长度：</text>
				<text class="debug-value">{{ textValue.length }}</text>
			</view>
			
			<view class="debug-item">
				<text class="debug-label">数字输入值：</text>
				<text class="debug-value">{{ numberValue || '未输入' }}</text>
			</view>
			
			<view class="debug-item">
				<text class="debug-label">小数输入值：</text>
				<text class="debug-value">{{ decimalValue || '未输入' }}</text>
			</view>
			
			<view class="debug-item">
				<text class="debug-label">多行文本长度：</text>
				<text class="debug-value">{{ textareaValue.length }}</text>
			</view>
			
			<view class="debug-item">
				<text class="debug-label">最后聚焦的输入框：</text>
				<text class="debug-value">{{ lastFocused || '无' }}</text>
			</view>
		</view>

		<view class="button-group">
			<button class="test-btn" @click="clearAll">清空所有</button>
			<button class="test-btn" @click="fillTestData">填充测试数据</button>
			<button class="test-btn" @click="triggerFix">手动修复输入框</button>
		</view>
	</view>
</template>

<script>
import inputMixin from '@/utils/input-mixin.js'

export default {
	mixins: [inputMixin],
	
	data() {
		return {
			textValue: '',
			numberValue: '',
			decimalValue: '',
			passwordValue: '',
			textareaValue: '',
			pickerIndex: 0,
			pickerOptions: ['选项1', '选项2', '选项3', '选项4', '选项5'],
			showPassword: false,
			lastFocused: ''
		}
	},
	
	methods: {
		onTextInput(e) {
			console.log('文本输入:', e.detail.value)
		},
		
		onNumberInput(e) {
			console.log('数字输入:', e.detail.value)
		},
		
		onDecimalInput(e) {
			console.log('小数输入:', e.detail.value)
		},
		
		onPasswordInput(e) {
			console.log('密码输入:', e.detail.value)
		},
		
		onTextareaInput(e) {
			console.log('多行文本输入:', e.detail.value)
		},
		
		onPickerChange(e) {
			this.pickerIndex = e.detail.value
			console.log('选择器变化:', this.pickerOptions[this.pickerIndex])
		},
		
		onFocus(e) {
			this.lastFocused = '文本输入框'
			console.log('文本输入框聚焦')
		},
		
		onBlur(e) {
			console.log('文本输入框失焦')
		},
		
		onTextareaFocus(e) {
			this.lastFocused = '多行文本输入框'
			console.log('多行文本输入框聚焦')
		},
		
		onTextareaBlur(e) {
			console.log('多行文本输入框失焦')
		},
		
		togglePassword() {
			this.showPassword = !this.showPassword
		},
		
		clearAll() {
			this.textValue = ''
			this.numberValue = ''
			this.decimalValue = ''
			this.passwordValue = ''
			this.textareaValue = ''
			this.pickerIndex = 0
			this.lastFocused = ''
			
			uni.showToast({
				title: '已清空所有输入',
				icon: 'success'
			})
		},
		
		fillTestData() {
			this.textValue = '测试文本内容'
			this.numberValue = '12345'
			this.decimalValue = '123.45'
			this.passwordValue = 'test123'
			this.textareaValue = '这是多行文本测试内容\n第二行内容\n第三行内容'
			this.pickerIndex = 2
			
			uni.showToast({
				title: '已填充测试数据',
				icon: 'success'
			})
		},
		
		triggerFix() {
			this.triggerInputFix()
			uni.showToast({
				title: '已手动触发输入框修复',
				icon: 'success'
			})
		}
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
}

.test-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: block;
}

.input-group {
	margin-bottom: 30rpx;
	position: relative;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
	display: block;
}

.test-input, .test-textarea, .test-picker {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	font-size: 28rpx;
	background-color: #fff !important;
	color: #333 !important;
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	user-select: text !important;
	-webkit-user-select: text !important;
	-webkit-touch-callout: default;
	-webkit-tap-highlight-color: transparent;
	caret-color: #667eea;
	z-index: 1;
	position: relative;
	height: auto;
	min-height: 68rpx;
	vertical-align: middle;
}

.test-textarea {
	min-height: 120rpx;
	resize: none;
	vertical-align: top;
}

.picker-text {
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #fff;
}

.password-toggle {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 36rpx;
	padding: 10rpx;
	cursor: pointer;
	z-index: 10;
}

.value-display {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
	display: block;
}

.debug-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.debug-item:last-child {
	border-bottom: none;
}

.debug-label {
	font-size: 28rpx;
	color: #666;
}

.debug-value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.button-group {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.test-btn {
	padding: 30rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.test-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}
</style>
